<!-- 人员档案-人员详情(合同信息)-->
<template>
  <view class="cont u-p-b-50">
    <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 20rpx' }"
      :head-style="{ padding: '28rpx 30rpx 10rpx' }" :head-border-bottom="false"
      :foot-style="{ padding: '0rpx 30rpx 30rpx' }" :foot-border-top="false">
      <view slot="head">
        <view class="card-row u-flex head">
          <u-section title="合同附件" color="#014833" font-size="32" :right="false"></u-section>
        </view>
      </view>
      <template v-if="dataMsg.length && showFile">
        <view slot="body">
          <view class="card-row u-p-10 u-card u-card--border u-m-b-10" v-for="obj in dataMsg" :key="obj.id">
            <scroll-view :scroll-x="true" class="u-flex of-hide">
              <view class="container-body u-flex">
                <view class="body-card">
                  <view class="u-p-b-20 f-bold">{{ obj.startDate }} 至 {{ obj.endDate }}</view>
                  <view class="u-flex u-m-b-20" v-for="(item, index) in list" :key="index">
                    <view class="u-p-r-20 tit">{{ item.name }}</view>
                    <view class="txt">{{ obj[item.msg] }}</view>
                  </view>
                </view>
              </view>
            </scroll-view>

            <view>
              <view class=" foot u-p-t-20">
                <view class="card-grid u-p-t-30">
                  <block v-if="fileOne[obj.id]">
                    <block v-for="(src, index) in fileOne[obj.id]" :key="index">
                      <!-- 显示图片类 -->
                      <u-image v-if="getFileType(src.archivesUrl) === 'file image'" border-radius="30" width="100%"
                        height="254rpx" :src="getSrc(src.archivesUrl)" @click="download(src.archivesUrl)">
                        <view slot="error">
                          <u-image :src="`/static/image/pz/fileAttachments/${getFileTypeName(src.archivesUrl)}.svg`"
                            width="160rpx" height="160rpx" />
                        </view>
                      </u-image>
                      <!-- 显示非图片类 -->
                      <view class="file-down" v-else @click="download(src.archivesUrl)">
                        <u-image width="160rpx" height="160rpx"
                          :src="`/static/image/pz/fileAttachments/${getFileTypeName(src.archivesUrl)}.svg`" />
                      </view>
                    </block>
                  </block>
                </view>
              </view>
            </view>
          </view>
        </view>

      </template>

      <template v-if="dataMsg.length == 0">
        <view slot="body" class="c-empty">
          <view class="p-absolute-center"><u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
          </view>
        </view>
      </template>
    </u-card>
  </view>
</template>
<script>
import fileMix from '@/pages/common/fileDownload.js'
export default {
  mixins: [fileMix],
  props: {
    dataMsg: Array,
    default: []
  },
  data () {
    return {
      showFile: false,
      list: [
        {
          name: '更新时间:',
          msg: 'lastModifiedDate'
        },
        {
          name: '是否当前生效:',
          msg: 'isTrue'
        },
      ],
      fileOne: {},
      fileTypeOne: {
        archivesType: 'c01',
        materialType: 'cyt02',
        method: 'POST',
        relationId: ''
      }
    };
  },
  mounted () {
    this.getData();
  },
  methods: {
    getData () {
      if (this.dataMsg) {
        this.dataMsg.forEach(item => {
          this.$post('/system/archives/findByType', { ...this.fileTypeOne, relationId: item.id }).then((urlData) => {
            if (urlData && urlData.body) {
              this.fileOne[item.id] = urlData.body
              console.log(this.fileOne);
              this.showFile = false
              this.showFile = true
            }
          })
        })

      }

    },
  }
}
</script>
<style lang="scss" scoped>
.cont {
  height: 100%;
  overflow: auto;
}

.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #F6F6F6;
}

.body-card {
  .txt {
    color: #666;
  }

  .tit {
    color: #333;
  }

}

.foot {
  border-top: 2rpx solid #F6F6F6;

  .card-grid {
    width: 100%;
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(3, 1fr);
    gap: 10rpx;

    /deep/.u-image__error {
      background: transparent;
    }
  }
}

.c-empty {
  height: 520rpx;
}
</style>